<template>
    <div>
        <!-- 用户信息区域 -->
        <div class="top">
            <div class="userinfo">
                <img :src="userinfo.avatarUrl">
            </div>
            <div class="nickname">
                <label>{{ userinfo.nickName }}</label>
                <p class="notice">{{ quote }}</p>
            </div>
        </div>

        <div class="contain">
            <div class="row" @click="showOrder">
                <label class="left">
                    <img class="img" src="../../../static/images/homework.png" alt="">
                </label>
                <label class="name">&nbsp;&nbsp;我的订单</label>
                <label class="right">></label>
            </div>

            <div class="row" @click="showOperate">
                <label class="left">
                    <img class="img" src="../../../static/images/operate.png" alt="">
                </label>
                <label class="name">&nbsp;&nbsp;操作指引</label>
                <label class="right">></label>
            </div>

            <div class="row" @click="showOpinion">
                <label class="left">
                    <img class="img" src="../../../static/images/approval.png" alt="">
                </label>
                <label class="name">&nbsp;&nbsp;意见反馈</label>
                <label class="right">></label>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      userinfo: {},
      quote: ''
    }
  },
  methods: {
    rankArray () {
      // + '' 将小数转换承字符串
      var a = Math.random() + ''
      // 读取生成的第3个数字，（0 - 9）
      var rank1 = a.charAt(2)
      var quotes = [
        '饭菜穿肠过，礼让心中留',
        '即使饥肠辘辘，也要风度依然 ',
        '珍惜粮食，远离浪费 ​',
        '饮食是文化，请从窗口文明做起',
        '就文明餐，做文明人 ！！！',
        '倒下的是剩饭，流走的是血汗！',
        '谁知盘中餐，粒粒皆辛苦。',
        '饮水要思源，吃饭当节俭。',
        '干净、卫生，你我共同努力。',
        '讲究卫生，预防疾病'
        ]
      // 将读取的随机语句赋值给quote
      this.quote = quotes[rank1]
    },
    showOpinion () {
      wx.navigateTo({
        url: '/pages/opinion/main'
      })
    },
    showOperate () {
      wx.navigateTo({
        url: '/pages/operate/main'
      })
    },
    showOrder () {
      wx.navigateTo({
        url: '/pages/order/main'
      })
    }
  },
  // 每次切换到当前页面都会执行onshow方法
  onShow () {
    this.rankArray()
  },
  mounted () {
    // 获取缓存信息
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo.openId) {
      this.userinfo = userinfo
      console.log(this.userinfo)
    }
  },
  // 分享页面
  onShareAppMessage () {
    return {
      title: `南北口味、集于一堂！
              温馨食尚、念念不忘！
              食堂点餐、我选餐餐香 ~`,
      path: '/pages/me/main'
    }
  }
}
</script>

<style scoped>
    .contain {
        margin-top: 10px;
        background: #ffffff;
        font-size: 15px;
    }
    .row {
        padding: 0 18px;
        border-bottom: 1px #e8e8e8 solid;
        height: 55px;
        line-height: 55px;
    }
    .img {
        float: left;
        width: 25px;
        height: 25px;
        padding-top: 16px;
    }
    .name {
        float: left;
        font-size: 16px;
    }

    .right {
        float: right;
        color: #c8c8c8;
        line-height: 55px;
        font-size: 20px;
    }
    .left {
        width: 80%;
    }

    .top {
        height: 80px;
        width: 100%;
        background: #ea5149;
        padding-top: 30px;
        display: block;
    }
    .userinfo {
        padding-bottom: 5px;
        float: left;
    }
    .top img {
        width: 120rpx;
        height: 120rpx;
        margin: 10rpx;
        border-radius: 50%;
        border: 1px #d0d0d0 solid;
    }
    .top .nickname {
        padding-top: 30px;
        padding-left: 5px;
        color: #ffffff;
        font-size: 18px;
        float: left;
    }
    .underline {
        border: 1px solid #ffffff;
        border-radius: 5px;
        text-align: center;
    }
    .notice {
        color: #d8d8d8;
        font-size: 14px;
    }
    .a-line {
        background: #ea5149;
        border: none;
        display: inline;
        font-size: 16px;
        color: #ffffff;
        text-decoration: underline;
    }
</style>